<template>
    <div>
        <h1>会员列表</h1>

                门店名称：
                <input type="text" v-model="page.name" >
               状态:
               <select v-model="page.state">
                <option value="">请选择</option>
                <option value="true">启用</option>
                <option value="false">禁用</option>
               </select>
               <input type="button" value="查询" @click="show">
               <input type="button" value="清除" @click="chu">
        <table class="table">
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" v-model="s" @change="sid">
                    </td>
                    
                    <th>会员编号</th>
                    <th>会员账号</th>
                    <th>密码</th>
                    <th>门店名称</th>
                    <th>状态</th>
                    <th>门店图片</th>
                    <th>操作</th>
                    
                </tr>
            </thead>
            <tbody v-for="d in data">
                <tr>
                    <td>
                        <input type="checkbox" :value="d.id" v-model="tts">
                    </td>
                    <td>{{d.id}}</td>
                    <td>{{d.name}}</td>
                    <td>******</td>
                    <td>{{d.mname}}</td>
                    <td>{{d.state?"启用":"禁用"}}</td>
                    <td>
                        <img :src='"https://localhost:7041"+d.img' style="width: 60px; height: 60px;">
                    </td>
                    <td>
                        <input type="button" value="逻辑删除" @click="rome(d.id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="批量逻辑删除" @click="Delept">
        <br>
        共{{sum.count}}条数据,目前{{page.size}}条数据，共{{sum.pagecount}}行，目前{{page.index}}行
        <input type="button" value="首页" @click="fan(1)">
        <input type="button" value="上一页" @click="fan(page.index-1)">

        <input type="button" v-for="d in sum.pagecount" :value="d" @click="fan(d)">

        <input type="button" value="下一页" @click="fan(page.index+1)">
        <input type="button" value="尾页" @click="fan(sum.pagecount)">

        页容量:
        <select v-model="page.size" @change="fy">
            <option value="3">===3===</option>
            <option value="4">===4===</option>
            <option value="5">===5===</option>
        </select>
        
        <input type="number" v-model="page.index">
        <input type="button" value="跳转/页" @click="show">
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
const s=ref(false);
const tts=ref([]);
const sid=()=>{
    if(s.value){
        tts.value=[];
        data.value.forEach((e=>{
            tts.value.push(e.id)
        }))
    }
    else{
        tts.value=[]
    }
}
///批量逻辑删
const Delept=()=>{

    axios.delete("https://localhost:7041/api/Men/DeleteAll",{params:{idstring:tts.value.toString()}}).then(res=>{
        if(res.data>0){                                                 
            alert('逻辑删除成功')
            show()
        }
        else{
            alert('逻辑删除失败')
        }
    })
}
//删除
const rome=(val:any)=>{
    if(!confirm('确定要删除吗？')){
        return;
    }
    axios.delete("https://localhost:7041/api/Men/Rome",{params:{id:val}}).then(res=>{
        if(res.data>0){
            alert('逻辑删除成功')
            show()
        }
        else{
            alert('逻辑删除失败')
        }
    })
}




//翻页
const fan=(vul:any)=>{
    if(vul>0 && vul<=sum.value.pagecount){
        page.value.index=vul;
        show()
    }
}

const fy=()=>{
    page.value.index=1;
    show()
}

const data=ref([{
    "id": 0,
  "name": "",
  "pass": "",
  "mname": "",
  "state": true,
  "isdep": true,
  "img": ""
}])
const page=ref({
    name:"",
    state:"",
    index:1,
    size:3
});
const sum=ref({
    count:0,
    pagecount:0
})
const show=()=>{
    axios.get("https://localhost:7041/api/Men/Show",{params:page.value}).then(res=>{
        data.value=res.data.list;
        sum.value.count=res.data.ddst;
        sum.value.pagecount=Math.ceil(sum.value.count/page.value.size);
    })
}

const chu=()=>{
    page.value.name="",
    page.value.state=""
    show()
}



onMounted(()=>{
    show()
})
</script>

<style scoped>

</style>